<template>
  <view class="container">
    <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
            :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
            indicator-active-color="#0081ff">
      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item">
          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
          <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
        </view>
      </swiper-item>
    </swiper>
     <view class="history">
	    <view class="dan">10分钟前 张*成功预测</view>
	  <view class="kuan"></view>
		<view class="sonm" >已有4563人次进行高考预测</view>
	  </view>
	  <view class="example">
      <uni-forms ref="form" :model="user" labelWidth="80px">
        <uni-forms-item label="考生类型" name="nickName">
          <uni-combox
                :candidates="candidates"
                placeholder="请选择考生类型"
                v-model="user.nickName"
                @input="comboxInput"
              ></uni-combox>
			  <view class="result-box">
			        <text>所选考生类型为：{{ user.nickName }}</text>
			      </view>
        </uni-forms-item>
        <uni-forms-item label="专业分数" name="phonenumber">
          <uni-easyinput v-model="user.phonenumber" placeholder="请输入专业分数" />
        </uni-forms-item>
		<uni-forms-item label="专业排名" name="paiming">
		  <uni-easyinput v-model="user.paiming" placeholder="请输入专业排名" />
		</uni-forms-item>
		<uni-forms-item label="预估成绩" name="email">
		  <uni-easyinput v-model="user.email" placeholder="请输入预估高考成绩" />
		</uni-forms-item>
      </uni-forms>
      <button type="primary" @click="submit">高考预测</button>
	 <view class="son" type="text" @click="goto('/pages/gk/result/index')">历史预测查询</view>
    </view>
  </view>
</template>

<script>
import { getUserProfile } from "@/api/system/user"
import { updateUserProfile } from "@/api/system/user"
export default {
  data() {
    return {
      cardCur: 0,
      swiperList: [{
        id: 0,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
      }, {
        id: 1,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
      }, {
        id: 2,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
      }, {
        id: 3,
        type: 'image',
        url: ''
      }, {
        id: 4,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
      }, {
        id: 5,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
      }, {
        id: 6,
        type: 'image',
        url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
      }],
      dotStyle: false,
      towerStart: 0,
      direction: '',
      user: {
        nickName: "",
        phonenumber: "",
        email: "",
      },
	  candidates: ["美术与设计学", "舞蹈学", "音乐学(声乐)", "音乐学(器乐)"],
	        city: "",
      rules: {
        nickName: {
          rules: [{
            required: true,
            errorMessage: '考生类型不能为空'
          }],
        },
        phonenumber: {
          rules: [{
            required: true,
            errorMessage: '分数不能为空'
          }, {
            pattern: /^[0-9]{1,3}$/,
            errorMessage: '请输入正确的分数'
          }]
        },
		paiming: {
		  rules: [{
		    required: true,
		    errorMessage: '排名不能为空'
		  }, {
		    pattern: /^[0-9]{1,7}$/,
		    errorMessage: '请输入正确的排名'
		  }]
		},
        email: {
          rules: [{
            required: true,
            errorMessage: '预估高考分数不能为空'
          }, {
           pattern: /^[0-9]{1,3}$/,
            errorMessage: '请输入正确的预估高考分数'
          }]
        }
      }
    }
  },
  onLoad() {
    this.getUser()
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
	goto(url){
	  		uni.navigateTo({
	  		url:url
	  	  })
	  	},
    getUser() {
      // getUserProfile().then(response => {
      //   this.user = response.data
      // })
    },
	change(e) {
	      console.log("e:", e);
		},
    submit(ref) {
      this.$refs.form.validate().then(res => {
        updateUserProfile(this.user).then(response => {
          this.$modal.msgSuccess("预测成功")
        })
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background: linear-gradient(rgb(205, 239, 251),40%,rgb(254, 248, 216));
}

.example {	
  padding: 10px;
  margin: 0 20rpx 0rpx 20rpx;
  background-color:rgb(255,255,255);
  border-radius: 15px;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
}
.history{
	display: flex;
	justify-content: space-around; 
	margin-bottom: 20rpx;
}
.son{
	display: flex;
	width:230rpx;
	height: 70rpx;
	font-size: 18px;
	align-items: center;
	margin: 0 auto 0 auto;
}
.sonm{
	width: 230rpx;
	display: flex;
	font-size: 18px;
}
.kuan{
	height: 45px;
	width: 1px ;
	background-color: #999;
}
.dan{
	display: flex;
	width: 230rpx;
	font-size: 18px;
}
</style>
